<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>实例方法</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>实例方法</h1>
    <hr>
    <div id="app">
       
    </div>
    <p><button onclick="des()">卸载</button></p>
    <p><button onclick="reload()">刷新</button></p>
    <p><button onclick="tick()">更改</button></p>
    <script type="text/javascript">
       var jslink = Vue.extend({
           template:`<p>{{message}}</p>`,
           data:function(){
               return{
                   message:"i am link"
               }
           },
           mounted:function(){
               console.log("mounted 被挂载!");
           },
           destroyed:function(){
               console.log("destroyed 销毁之后!")
           },
           updated:function(){
                console.log("updated 更新之后!")
           }
       });
       var vm = new jslink().$mount("#app");
       function des(){
           vm.$destroy();
       }
       function reload(){
            vm.$forceUpdate();
       }
       function tick(){
           vm.message = "i am zelda";
           vm.$nextTick(function(){
                console.log('message更新完后我被调用了');
            })
       }
    </script>
</body>

</html>